<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、Class与Style绑定 对象语法</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<style type="text/css">
	.active { font-weight: 800; }
	.text-danger { color: red; }
	</style>
</head>
<body>
	<!-- 要绑定元素的样式，可以使用v-bind:class，但直接拼接字符串又很容易出错，因此vue提供了特殊的class属性绑定：使用对象或数组 -->
	<div id="app">
		<!-- 使用语法很简单，传入一个对象字符串，对象中每一项的属性名表示类名，
			属性值是是否要绑定这个类的布尔值，属性值的控制可以放在实例的data中，
			只要改变data中的值，样式也会相应发生改变 -->
		<p v-bind:class="{ 'active': isActive, 'text-danger': hasError }">test1</p>
		<button @click="inactive">变细</button>
		<button @click="changeColor">改变颜色</button>

		<!-- 可以把整个对象放到data中,但是这样做失去了上面那样做的灵活性
			不能通过控制某个布尔值来控制是否使用某个样式，而必须对整个对
			象的值进行重置
		 -->
		<p :class="classObject">test2</p>
		<button @click="changeAll">变细和改变颜色</button>

		<!-- 使用返回对象的计算属性，就是兼顾上面外观简洁性和使用便捷性的最好方法 -->
		<p :class="classObject2">test3</p>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				isActive: true,
				hasError: true,
				classObject: {
					'active': true,
					'text-danger': true
				}
			},
			methods: {
				inactive: function(){
					this.isActive = false
				},
				changeColor: function(){
					this.hasError = false
				},
				changeAll: function(){
					this.classObject = { 'active': false, 'text-danger': false }
				}
			},
			computed: {
				classObject2: function(){
					return {
						'active': this.isActive,
						'text-danger': this.hasError
					}
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->